<template>
  <el-dialog
    class="contract-review-table-dialog"
    width="1000px"
    :visible.sync="dialogVisible"
    title="合同评审表"
    :close-on-click-modal="false"
    :append-to-body="true"
    v-dialogDrag="true"
    @open="handleDialogOpen"
    @closed="handleDialogClosed"
  >
    <table class="contract-review-table" cellspacing="0" cellpadding="0" border>
      <thead>
        <tr>
          <th colspan="4">
            <h1>合同评审表</h1>
            <p style="text-align: right; padding-right: 10px;">文件号：CR/ZR-01-117.11</p>
            <p style="text-align: right; padding-right: 10px;">版本号：第1版/第0次修改</p>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="center" style="width: 120px;">项目名称</td>
          <td class="center" colspan="3">张掖市医用辐射防护现场检测</td>
        </tr>
        <tr>
          <td class="center">项目单位</td>
          <td class="center" colspan="3">张掖市疾病预防控制中心</td>
        </tr>
        <tr>
          <td class="center">评价类别</td>
          <td class="center" colspan="3">
            <el-checkbox-group v-model="evaluateDetail.category">
              <el-checkbox label="1">职业病危害预评价</el-checkbox>
              <el-checkbox label="2">职业病危害控制效果评价</el-checkbox>
              <el-checkbox label="3">定期检测</el-checkbox>
            </el-checkbox-group>
          </td>
        </tr>
        <tr>
          <td class="center" rowspan="10">风险判别准则</td>
          <td class="center" style="width: 50px;">1</td>
          <td>项目设备和器械是否属于国家淘汰的落后工艺、产品，是否符合国家、地方相关产业政策；</td>
          <td style="width: 180px;">
            <el-radio-group v-model="evaluateDetail.options_1">
              <el-radio :label="1">符合</el-radio>
              <el-radio :label="2">不符合</el-radio>
            </el-radio-group>
          </td>
        </tr>
        <tr>
          <td class="center">2</td>
          <td>评价项目的所处行业或规模是否在中心资质规定的业务范围之内；</td>
          <td>
            <el-radio-group v-model="evaluateDetail.options_2">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="2">否</el-radio>
            </el-radio-group>
          </td>
        </tr>
        <tr>
          <td class="center">3</td>
          <td>评价人员的专业构成能否满足项目的要求，有无备用的技术专家，若技术专家也不能满足要求，则该项目不具备可行性；</td>
          <td>
            <el-radio-group v-model="evaluateDetail.options_3">
              <el-radio :label="1">可行</el-radio>
              <el-radio :label="2">不可行</el-radio>
            </el-radio-group>
          </td>
        </tr>
        <tr>
          <td class="center">4</td>
          <td>检验检测手段能否满足项目的要求，有无技术支撑及协作渠道，若达不到要求，则项目不可行；</td>
          <td>
            <el-radio-group v-model="evaluateDetail.options_4">
              <el-radio :label="1">可行</el-radio>
              <el-radio :label="2">不可行</el-radio>
            </el-radio-group>
          </td>
        </tr>
        <tr>
          <td class="center">5</td>
          <td>项目存在的缺陷、隐患突出，而职业卫生投入严重不足，无力整改到位的项目不可行；</td>
          <td>
            <el-radio-group v-model="evaluateDetail.options_5">
              <el-radio :label="1">可行</el-radio>
              <el-radio :label="2">不可行</el-radio>
            </el-radio-group>
          </td>
        </tr>
        <tr>
          <td class="center">6</td>
          <td>建设项目无取得前期合法的批复手续，或防护设施“三同时”程序不到位的项目不可行；</td>
          <td>
            <el-radio-group v-model="evaluateDetail.options_6">
              <el-radio :label="1">可行</el-radio>
              <el-radio :label="2">不可行</el-radio>
            </el-radio-group>
          </td>
        </tr>
        <tr>
          <td class="center">7</td>
          <td>评价所需项目资料、数据收集难度很大，缺乏关键资料数据（如相关检测报告）的项目不可行；</td>
          <td>
            <el-radio-group v-model="evaluateDetail.options_7">
              <el-radio :label="1">可行</el-radio>
              <el-radio :label="2">不可行</el-radio>
            </el-radio-group>
          </td>
        </tr>
        <tr>
          <td class="center">8</td>
          <td>项目风险较大，而评价收费低于同类项目30%，则该项目在经济上不可行；</td>
          <td>
            <el-radio-group v-model="evaluateDetail.options_8">
              <el-radio style="line-height: 25px;" :label="1">可以接受</el-radio>
              <el-radio style="line-height: 25px;" :label="2">勉强接受</el-radio>
              <el-radio style="line-height: 25px;" :label="3">费用过低，不能接受</el-radio>
            </el-radio-group>
          </td>
        </tr>
        <tr>
          <td class="center">9</td>
          <td>顾客特殊要求不能满足的项目不可行；</td>
          <td>
            <el-radio-group v-model="evaluateDetail.options_9">
              <el-radio :label="1">可行</el-radio>
              <el-radio :label="2">不可行</el-radio>
            </el-radio-group>
          </td>
        </tr>
        <tr>
          <td class="center">10</td>
          <td>项目时间要求过紧，不能保证质量的项目不可行。</td>
          <td>
            <el-radio-group v-model="evaluateDetail.options_10">
              <el-radio :label="1">可行</el-radio>
              <el-radio :label="2">不可行</el-radio>
            </el-radio-group>
          </td>
        </tr>
        <tr>
          <td class="center">
            <div>风险分析</div>
            <div>相关问题记载</div>
          </td>
          <td class="center" style="padding: 0 0;" colspan="3">
            <el-input
              type="textarea"
              v-model="evaluateDetail.riskAnalysis"
              :clearable="false"
              placeholder=""
              :autosize="{ minRows: 1 }"
            ></el-input>
          </td>
        </tr>
        <tr>
          <td class="center">风险分析结果</td>
          <td class="center" colspan="3">
            <el-radio-group v-model="evaluateDetail.riskAnalysisResult">
              <el-radio label="1">接受委托</el-radio>
              <el-radio label="2">不能接受委托</el-radio>
              <el-radio label="3">再洽</el-radio>
            </el-radio-group>
          </td>
        </tr>
        <tr>
          <td colspan="2">风险分析人员签名：</td>
          <td class="center">审核建议</td>
          <td class="center">▲/△</td>
        </tr>
      </tbody>
    </table>

    <div class="dialog-footer" slot="footer">
      <el-button type="primary" @click="handleSubmit">保存</el-button>
      <el-button @click="dialogVisible = false">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {
  getContractReviewContentById,
  saveContractReviewContent
} from '@/api/slides/contractTask'

export default {
  name: 'ContractReviewTableDialog',
  dicts: [],
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    row: {
      type: Object,
      default: () => ({})
    },
    data: {
      type: Object,
      default: () => ({})
    }
  },
  computed: {
    dialogVisible: {
      get() {
        return this.show
      },
      set(value) {
        this.$emit('update:show', value)
      }
    }
  },
  data() {
    return {
      tableLoading: false,
      evaluateDetail: {}
    }
  },
  created() {
    this.initEvaluateDetail()
  },
  methods: {
    // 初始化表格字段
    initEvaluateDetail() {
      this.evaluateDetail = {
        category: [],
        options_1: '',
        options_2: '',
        options_3: '',
        options_4: '',
        options_5: '',
        options_6: '',
        options_7: '',
        options_8: '',
        options_9: '',
        options_10: '',
        riskAnalysis: '',
        riskAnalysisResult: ''
      }
    },
    // 弹框打开时
    handleDialogOpen() {
      if (this.row.tasksContractId) {
        this.getContractReviewTableContent()
      } else {
        console.log({...this.data});
        if (JSON.stringify(this.data) !== '{}') {
          this.evaluateDetail = JSON.parse(JSON.stringify(this.data))
        }
      }
    },
    // 弹框关闭时
    handleDialogClosed() {
      this.tableLoading = false
      if (this.row.tasksContractId) {
        this.initEvaluateDetail()
      }
    },
    // 获取合同评审表内容
    getContractReviewTableContent() {
      this.tableLoading = true
      const tasksContractId = this.row.tasksContractId
      getContractReviewContentById(tasksContractId).then(res => {
        this.tableLoading = false
        if (res.data.evaluate) {
          this.evaluateDetail = res.data.evaluate
          this.evaluateDetail.category = this.evaluateDetail.category ? this.evaluateDetail.category.split(',') : []
        }
      }).catch(err => {
        this.tableLoading = false
      })
    },
    // 获取保存参数数据
    getFormData() {
      const data = JSON.parse(JSON.stringify(this.evaluateDetail))
      data.tasksContractId = this.row.tasksContractId
      data.category = data.category.join(',')
      return data
    },
    // 提交
    handleSubmit() {
      if (!this.row.tasksContractId) {
        this.dialogVisible = false
        this.$emit('temp-save', this.evaluateDetail)
        return
      }
      const data = this.getFormData()
      let fn = saveContractReviewContent
      fn(data).then(res => {
        this.$message.success('保存成功')
        this.dialogVisible = false
      }).catch(err => {})
    }
  }
}
</script>

<style lang="scss" scoped>
.contract-review-table-dialog {

  ::v-deep .el-dialog {
    overflow: unset !important;
  }

  ::v-deep .el-dialog__body {
    padding: 20px 20px 30px;
    max-height: 80vh;
    overflow-y: auto;
  }

  table.contract-review-table {
    width: 100%;
    border-color: #dfe6ec;
    border-collapse: collapse;

    thead tr th {
      height: 34px;
      text-align: center;
    }

    tbody tr td {
      padding: 10px 10px;
      height: 40px;
    }
    tbody tr td.center {
      text-align: center;
    }

    ::v-deep .el-input {
      width: 100%;
      height: 100%;
    }
    ::v-deep .el-input .el-input__inner {
      width: 100%;
      height: 100%;
      border: none;
    }

    ::v-deep .el-textarea {
      width: 100%;
      height: 100%;
    }
    ::v-deep .el-textarea .el-textarea__inner {
      width: 100%;
      min-height: 100% !important;
      border: none;
      resize: none;
    }

    ::v-deep .el-date-editor {
      width: 100%;
      height: 100%;
    }
    ::v-deep .el-date-editor .el-input__inner {
      padding: 0 10px;
      width: 100%;
      height: 100%;
      border: none;
    }
    ::v-deep .el-date-editor .el-input__prefix {
      display: none;
    }
  }
}
</style>